home *** CD-ROM | disk | FTP | other *** search
/ PC go! 2018 January / PCgo 01-2018 CD-ROM Germany.iso / nw.pak / Unnamed File 000165.txt < prev    next >
Encoding:
Text File  |  2015-07-29  |  7.9 KB  |  249 lines
  1. <!--
  2.     @license
  3.     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
  4.     This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5.     The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6.     The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7.     Code distributed by Google as part of the polymer project is also
  8.     subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9. --><html><head><link href="../core-selector/core-selector.html" rel="import">
  10. <link href="../core-resizable/core-resizable.html" rel="import">
  11.  
  12. <link href="transitions/hero-transition.html" rel="import">
  13. <link href="transitions/cross-fade.html" rel="import">
  14.  
  15. <!--
  16.  
  17. `core-animated-pages` selects one of its children "pages" to show and runs a transition
  18. when switching between them. The transitions are designed to be pluggable, and can
  19. accept any object that is an instance of a `core-transition-pages`. Transitions to run
  20. are specified in the `transitions` attribute as a space-delimited string of `id`s of
  21. transition elements. Several transitions are available with `core-animated-pages` by
  22. default, including `hero-transition`, `cross-fade`, and `tile-cascade`.
  23.  
  24. Example:
  25.  
  26.     <style>
  27.       #hero1 {
  28.         position: absolute;
  29.         top: 0;
  30.         left: 0;
  31.         width: 300px;
  32.         height: 300px;
  33.         background-color: orange;
  34.       }
  35.       #hero2 {
  36.         position: absolute;
  37.         top: 200px;
  38.         left: 300px;
  39.         width: 300px;
  40.         height: 300px;
  41.         background-color: orange;
  42.       }
  43.       #bottom1, #bottom2 {
  44.         position: absolute;
  45.         bottom: 0;
  46.         top: 0;
  47.         left: 0;
  48.         height: 50px;
  49.       }
  50.       #bottom1 {
  51.         background-color: blue;
  52.       }
  53.       #bottom2 {
  54.         background-color: green;
  55.       }
  56.     </style>
  57.     // hero-transition and cross-fade are declared elsewhere
  58.     <core-animated-pages transitions="hero-transition cross-fade">
  59.       <section id="page1">
  60.         <div id="hero1" hero-id="hero" hero></div>
  61.         <div id="bottom1" cross-fade></div>
  62.       </section>
  63.       <section id="page2">
  64.         <div id="hero2" hero-id="hero" hero></div>
  65.         <div id="bottom2" cross-fade></div>
  66.       </section>
  67.     </core-animated-pages>
  68.  
  69. In the above example, two transitions (`hero-transition` and `cross-fade`) are run when switching
  70. between `page1` and `page2`. `hero-transition` transforms elements with the same `hero-id` such
  71. that they appear to be shared across different pages. `cross-fade` fades out the elements marked
  72. `cross-fade` in the outgoing page, and fades in those in the incoming page. See the individual
  73. transition's documentation for specific details.
  74.  
  75. Finding elements to transition
  76. ------------------------------
  77.  
  78. In general, a transition is applied to elements marked with a certain attribute. For example,
  79. `hero-transition` applies the transition on elements with the `hero` and `hero-id` attribute.
  80. Among the transitions included with `core-animated-pages`, script-based transitions such as
  81. `hero-transition` generally look for elements up to one level of shadowRoot from the
  82. `core-animated-pages` element, and CSS-based transitions such as `cross-fade` look for elements
  83. within any shadowRoot within the `core-animated-pages` element. This means you can use 
  84. custom elements as pages and mark elements in their shadowRoots as heroes, or mark 
  85. elements in deeper shadowRoots with other transitions.
  86.  
  87. Example:
  88.  
  89.     <polymer-element name="x-el" noscript>
  90.     <template>
  91.       <style>
  92.         #hero {
  93.           position: absolute;
  94.           top: 0;
  95.           right: 0;
  96.           width: 50px;
  97.           height: 300px;
  98.           background-color: blue;
  99.         }
  100.       </style>
  101.       <div id="hero" hero-id="bar" hero></div>
  102.     </template>
  103.     </polymer-element>
  104.  
  105.     <polymer-element name="x-page-1" noscript>
  106.     <template>
  107.       <style>
  108.         #hero1 {
  109.           position: absolute;
  110.           top: 0;
  111.           left: 0;
  112.           width: 300px;
  113.           height: 300px;
  114.           background-color: orange;
  115.         }
  116.       </style>
  117.       <div id="hero1" hero-id="foo" hero></div>
  118.       <div id="hero2" hero-id="bar" hero></div>
  119.     </template>
  120.     </polymer-element>
  121.  
  122.     <polymer-element name="x-page-2" noscript>
  123.     <template>
  124.       <style>
  125.         #hero1 {
  126.           position: absolute;
  127.           top: 200px;
  128.           left: 300px;
  129.           width: 300px;
  130.           height: 300px;
  131.           background-color: orange;
  132.         }
  133.         #hero2 {
  134.           background-color: blue;
  135.           height: 150px;
  136.           width: 400px;
  137.         }
  138.       </style>
  139.       // The below element is one level of shadow from the core-animated-pages and will
  140.       // be transitioned.
  141.       <div id="hero1" hero-id="foo" hero></div>
  142.       // The below element contains a hero inside its shadowRoot making it two levels away
  143.       // from the core-animated-pages, and will not be transitioned.
  144.       <x-el></x-el>
  145.     </template>
  146.     </polymer-element>
  147.  
  148.     <core-animated-pages transitions="hero-transition">
  149.       <x-page-1></x-page-1>
  150.       <x-page-2></x-page-2>
  151.     </core-animated-pages>
  152.  
  153. Note that the container element of the page does not participate in the transition.
  154.  
  155.     // This does not work
  156.     <core-animated-pages transitions="cross-fade">
  157.       <section cross-fade></section>
  158.       <section cross-fade></section>
  159.     </core-animated-pages>
  160.  
  161.     // This works
  162.     <core-animated-pages transitions="cross-fade">
  163.       <section>
  164.         <div cross-fade></div>
  165.       </section>
  166.       <section>
  167.         <div cross-fade></div>
  168.       </section>
  169.     </core-animated-pages>
  170.  
  171. Dynamically setting up transitions
  172. ----------------------------------
  173.  
  174. An easy way to set up transitions dynamically is to use property binding on
  175. the transition attributes. 
  176.  
  177. Example:
  178.  
  179.     <core-animated-pages selected="{{selected}}">
  180.       <section id="page1">
  181.         <div hero-id="hero" hero></div>
  182.       </section>
  183.       <section id="page2">
  184.         <div id="foo" hero-id="hero" hero?="{{selected === 1 || selected === 0}}" cross-fade="{{selected === 2}}"></div>
  185.       </section>
  186.       <section id="page3">
  187.       </section>
  188.     </core-animated-pages>
  189.  
  190. In the above example, the "foo" element only behaves as a hero element if transitioning between
  191. `#page1` and `#page2`. It gets cross-faded when transition to or from `#page3`.
  192.  
  193. Nesting pages
  194. -------------
  195.  
  196. It is possible to nest core-animated-pages elements for organization. Excessive nesting is
  197. not encouraged, however, since it makes setting up the transition more complex.
  198.  
  199. To nest core-animated-pages, the page containing the nested core-animated-pages element should
  200. have a `selectedItem` property bound to the `selectedItem` property of the nested element. This
  201. will allow the outer core-animated-pages to know which nested page it is actually transitioning
  202. to.
  203.  
  204. Example:
  205.  
  206.     <polymer-element name="nested-page" attributes="selectedItem">
  207.     <template>
  208.       <core-animated-pages selectedItem="{{selectedItem}}">
  209.         ...
  210.       </core-animated-pages>
  211.     </template>
  212.     </polymer-element>
  213.  
  214.     <core-animated-pages>
  215.       <section id="page1"></section>
  216.       <nested-page id="page2"></nested-page>
  217.     </core-animated-pages>
  218.  
  219. @element core-animated-pages
  220. @extends core-selector
  221. @status beta
  222. @homepage github.io
  223. -->
  224. <!--
  225. Fired before a page transition occurs. Both pages involved in the transition are visible when
  226. this event fires. This is useful if there is something the client needs to do when a page becomes
  227. visible.
  228.  
  229. @event core-animated-pages-transition-prepare
  230. -->
  231. <!--
  232. Fired when a page transition completes.
  233.  
  234. @event core-animated-pages-transition-end
  235. -->
  236. </head><body><polymer-element name="core-animated-pages" extends="core-selector" notap="" attributes="transitions" assetpath="">
  237.  
  238. <template>
  239.  
  240.   <link href="core-animated-pages.css" rel="stylesheet">
  241.  
  242.   <shadow></shadow>
  243.  
  244. </template>
  245.  
  246.  
  247.  
  248. </polymer-element>
  249. <script src="core-animated-pages-extracted.js"></script></body></html>